<template>
	<view class="app">
		<view class="app-container">
			<view class="flex text-center flex-direction justify-start">
				<view class="text-left text-xl text-bold padding-lr-xl padding-tb">
					<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
						<view class="cu-item" :class="currentIndex==0? 'text-default cur' : ''"  @tap="tabSelect(0)">
							扫码取件
						</view>
						<view class="cu-item" :class="currentIndex==1? 'text-default cur' : ''"  @tap="tabSelect(1)">
							其他方式
						</view>
					</scroll-view>
				</view>
				<view v-if="!currentIndex">
					<view class="text-left text-gray padding-lr-xl padding-bottom">
						点击按钮扫描设备二维码, 即可打印文件
					</view>
					<view class="bg-img scan padding-lr-xl padding-bottom"></view>
				</view>
				<view v-else>
					<!-- <view class="text-left text-gray padding-lr-xl padding-bottom">
						1. 提交需求, 让有时间的同学代取件
					</view>
					<view class="bg-img university"></view> -->
					<view class="text-left text-gray padding-lr-xl padding-bottom">
						将取件码输入设备屏幕, 即可打印文件
					</view>
					<view class="bg-img asterisk padding-lr-xl padding-bottom"></view>
					<!-- <view class="text-left text-gray padding-lr-xl padding-bottom">检测到您最新未打印文件的取件码为</view>
					<view class="text-left text-bold text-default padding-lr-xl text-xl">
						134875
					</view> -->
				</view>
			</view>
			<view class="padding-lr-xl margin-tb-sm" v-if="!currentIndex">
				<button class="cu-btn block bg-primary box-shadow lg" @click="scanEvent">扫码</button>
			</view>
			<view class="padding-lr-xl" v-else>
				<!-- <navigator url="/community-pages/publish">
					<button class="cu-btn block bg-primary box-shadow lg margin-tb-sm">提交需求代拿快递</button>
				</navigator> -->
				<navigator url="/user-pages/history">
					<button class="cu-btn block bg-primary box-shadow lg margin-tb-sm">查看取件码</button>
				</navigator>
			</view>
		</view>
		<!-- 底部model 用于选择打印订单 -->
		<view class="cu-modal bottom-modal" :class="{'show': bottomModal}">
			<view class="cu-dialog print-dialog">
				<view class="cu-bar bg-white">
					<!-- <view class="action text-green" @tap="confirmOrder">确定</view> -->
					<view class="action text-yellow fr" @tap="hideModal">关闭窗口</view>
				</view>
				<view class="padding-xl list-wrap">
					<view class="cu-list menu" :class="{ 'isIphoneX-class': isIphoneX }">
						<view class="cu-item" v-for="(item, index) in list" :key="index" @tap="confirmOrder(item)">
							<view class="content padding-tb-sm">
								<view class="text-cut">{{item.file_name || '暂时无法获取到文件名'}}</view>
								<view class="text-left text-gray text-sm">{{item.create_time}}</view>
							</view>
							<view class="action text-gray">
								<text class="cuIcon-infofill"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import CodeInput from '@/components/code-input/code-input.vue';
import {decrypt} from '@/common/tools/encryption.js'
import {sendOrderToCloudPrinter} from '@/api/print.js'
import { getCloudPrintHistoryOrderList } from '@/api/order.js';
import {mapGetters} from 'vuex'
export default {
	components: {
		CodeInput
	},
	data() {
		return {
			code: '',
			currentIndex: 0,
			bottomModal: false,
			//打印订单列表
			list: [],
			key: ''
		};
	},
	computed: {
		...mapGetters(['isIphoneX'])
	},
	methods: {
		tabSelect(index) {
			this.currentIndex = index
		},
		onShow() {
			this.getCloudPrintHistoryOrderListEvent()
		},
		scanEvent() {
			uni.scanCode({
				onlyFromCamera: true,
				scanType: ['qrCode'],
				success: (res) => {
					this.bottomModal = true
					this.key = res.result
				}
			})
		},
		/**
		 * 检索已付款未打印的订单
		 */
		getCloudPrintHistoryOrderListEvent() {
			getCloudPrintHistoryOrderList({
				status: 2,
				pageSize: '',
				currentPage: ''
			}).then(res => {
				 this.list = res.result.showing
			})
		},
		/**
		 * 确认选择订单
		 * @param {Object} item
		 */
		confirmOrder(item) {
			sendOrderToCloudPrinter({
				cloud_printer_number : this.key,
				code: item.code
			}).then(res => {
				uni.showToast({
					title: '正在打印中，请留意打印机，及时取件',
					icon: 'none',
					duration: 10000
				});
			})
			this.hideModal()
		},
		hideModal() {
			this.bottomModal = false
		},
	}
};
</script>

<style scoped lang="scss">
	.app-container {
		width: 100%;
	}
	.flex {
		height: 80%;
	}
	.bg-img.scan {
		width: 532rpx;
		height: 400rpx;
		margin-left: 50rpx;
		background-image: url()
	}
	.bg-img.university {
		width: 200rpx;
		height: 200rpx;
		margin-left: 50rpx;
		background-image: url();		
	}

	.bg-img.asterisk {
		width: 366rpx;
		height: 257rpx;
		margin-left: 50rpx;
		background-image: url();
	 }

	/deep/ .nav {
		.cu-item {
			margin-left: 0;
			padding-left: 0;
		}
	}
</style>
